<template>
  <div id="movieOrderDetailPage">
    <h1 v-if="data.orderStatus as number === 1">已支付</h1>
    <h1 v-else-if="data.orderStatus as number === 0">未支付</h1>
    <div class="table-wrapper">
      <el-table :data="dataList" style="width: 100%" border>
        <el-table-column prop="movieName" label="影片" width="auto" />
        <el-table-column prop="showTime" label="上映时间" width="auto">
          <template #default="scope">
            {{ dayjs(scope.row.showTime).format("HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column label="影院" width="auto">
          <template #default="scope">
            {{ scope.row.theaterName }} ({{ scope.row.theaterAddress }})
          </template>
        </el-table-column>
        <el-table-column label="座位" width="auto">
          <template #default="scope">
            <el-space>
              {{ HALL_TYPE_MAP[scope.row.hallType] }}
              {{ scope.row.seat.row }}排{{ scope.row.seat.column }}列
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="cinema-info">
      <p class="name">{{ data.theaterName }}</p>
      <p class="address">地址: {{ data.theaterAddress }}</p>
      <p class="phone">电话: 111111111</p>
      <p class="price">价格：{{ data.price }}</p>
    </div>
    <div class="btn-wrapper" v-if="data.orderStatus === 0">
      <el-button class="pay-btn" @click="handlePay">立即支付</el-button>
    </div>
    <div class="btn-wrapper" v-if="data.orderStatus === 1">
      <el-button class="pay-btn" @click="geToHome">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  reactive,
  ref,
  watchEffect,
  withDefaults,
} from "vue";

import API from "@/api";
import { getMovieVoByIdUsingGet } from "@/api/movieController";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { getMovieShowVoByIdUsingGet } from "@/api/movieShowController";
import {
  addMovieOrderUsingPost,
  editMovieOrderUsingPost,
  getMovieOrderVoByIdUsingGet,
} from "@/api/movieOrderController";
import { useRouter } from "vue-router";
import { HALL_TYPE_MAP } from "@/constant/movie";

interface Props {
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return 0;
  },
});

const data = ref<API.MovieOrderVO>({});
const dataList = ref<API.MovieOrderVO[]>([]);
/**
 * 加载数据
 */
const loadData = async () => {
  if (!props) {
    return;
  }
  const res = await getMovieOrderVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0) {
    data.value = res.data.data as any;
    dataList.value[0] = res.data.data as any;
    console.log(data.value.orderStatus === 0);
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

watchEffect(() => {
  loadData();
});

const router = useRouter();
const geToHome = () => {
  router.push("/admin/movie_order");
};
const handlePay = async () => {
  const res = await editMovieOrderUsingPost({
    id: props.id,
    orderStatus: 1,
  });
  if (res.data.code === 0) {
    ElMessage({
      message: "支付成功",
      type: "success",
    });
    loadData();
  } else {
    ElMessage({
      message: "支付失败，" + res.data.message,
      type: "error",
    });
  }
};
</script>

<style scoped>
#movieOrderDetailPage {
  .table-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cinema-info {
    position: relative;
    display: inline-block;
    width: 100%;
    color: #333;
  }

  .name {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 16px;
  }

  .btn-wrapper {
    position: relative;
    width: 100%;
  }

  .price {
    position: absolute;
    right: 20px;
  }

  .pay-btn {
    position: absolute;
    top: 40px;
    right: 20px;
  }
}

#movieOrderDetailPage .content-wrapper > p {
  margin-bottom: 24px;
}
</style>

<!--<div
            v-for="item in data.seats"
            :key="item.row && item.column"
            class="example"
            style="width: 30px; height: 26px"
            :class="item.status === 0 ? 'selectable-example' : 'sold-example'"
            @click="selectSeat(item)"
          ></div>-->
<!--<div
              v-if="item.status === 0"
              class="selectable-example example"
              style="width: 30px; height: 26px"
            />
            <div
              v-else-if="item.status === 1"
              class="sold-example example"
              style="width: 30px; height: 26px"
            />
            <div
              v-else-if="item.status === 2"
              class="selected-example example"
              style="width: 30px; height: 26px"
            />-->
